<!-- JX耗材管理(spu) -->
<template>
    <div class="page-box">
        <div class="page-title"  >
            {{ '耗材管理' }}
        </div>

        <div class="page-search">
            <div class="search-box" :style="{ height: IsHeight }">
                <el-input v-model="PageData.keywords" placeholder="请输入耗材名称" style="width: 200px; margin-right: 10px"
                    suffix-icon="search" />
                <el-button>重置</el-button>
            </div>
            <div class="search-btn">
                <div class="btn_item" @click="handleClickHeight">
                    <img class="btn_img" src="@/assets/sx.png" alt="" />
                    <span> 高级筛选 </span>
                </div>
            </div>
        </div>
        <div class="search-btn-right">
                <!-- <el-button color="#626aef" type="primary" @click="AddServer"> 新增服务 </el-button> -->
            </div>
    </div>
    <el-button type="danger" @click="batchDelete" :disabled="selectedRows.length === 0" style="margin-bottom: 30px;">
                    批量删除 ({{ selectedRows.length }})
 </el-button>
    <div class="table-box">
        <el-table height="660px" :data="tabeData" style="width: 100%" v-loading="loading" border 
                  @selection-change="handleSelectionChange" ref="tableRef">
            <el-table-column type="selection" width="55" />
            <!-- <el-table-column align="center" prop="rowNumber" label="序号" width="auto" /> -->
            <el-table-column align="center" prop="title" label="服务项目" width="auto" />
            <el-table-column align="center" prop="intro" label="简介"  />
            <el-table-column fixed="right" label="操作" width="300" prop="id" align="center">
                <template #default="scope">
                    <div class="btn-box">
                        <el-button plain size="small" type="primary" @click="handleClick(scope.row)"> 损耗设置 </el-button>
                        <!-- <el-button plain size="small" type="primary" @click="EditServe(scope.row)"> 编辑 </el-button> -->
                        <el-button plain size="small" type="danger" @click="DeleteServe([scope.row.id])"> 删除 </el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        
    </div>
    <!-- 分页 -->
    <!-- <Pagination class="pagination" @pageSize="pageSize" @getPage="getPage" :page="PageData.page"
        :page-size="PageData.page_size" :total="total" /> -->

    <LossSetting ref="LossSettingRef" @init="getConsumablesSettingsData" /> 
    <!-- 新增服务 -->
    <AddServe ref="AddServeRef" @getServeList="getConsumablesSettingsData" />
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
import Pagination from "@/components/Pagination.vue";
import LossSetting from "./components/consumablesSettings/LossSetting.vue";
import api from "@/api";
import AddServe from "./components/consumablesSettings/AddServe.vue";
import { ElMessage, ElMessageBox } from "element-plus";

//  新增出库
const LossSettingRef = ref<any>(null);
// 表格引用
const tableRef = ref<any>(null);
// 选中的行数据
const selectedRows = ref<any[]>([]);
// 出库详情
let IsHeight = ref<number | string>(0);
// 定义ts数据
interface PageData {
    // page_size: number;
    // page: number;
    // keywords: string;
    warehouse_serve_id: number;
}
// 定义数据
const PageData = ref<PageData>({
    // page_size: 10,
    // page: 1,
    // keywords: "",
    warehouse_serve_id: 0,
});
// 出库订单详情
const total = ref(0);
const tabeData = ref([]);
// 获取耗材服务列表
const getConsumablesSettingsData = async () => {
    const res = await api.publicFun.service_item_list({
        ...PageData.value,
    });
    if (res.code == 200) {
        tabeData.value = res.data;
        total.value = res.data.length;
    }
}

// 处理表格选中变化
const handleSelectionChange = (selection: any[]) => {
    selectedRows.value = selection;
    console.log('选中的行数据:', selectedRows.value);
};

// 清空选择
const clearSelection = () => {
    tableRef.value?.clearSelection();
    selectedRows.value = [];
};

// 删除服务（支持单个和批量）
const DeleteServe = async (serviceIds: number[]) => {
    try {
        await ElMessageBox.confirm(
            `确定要删除选中的 ${serviceIds.length} 个服务项目吗？`,
            '删除确认',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }
        );

        console.log('删除的服务ID数组:', serviceIds);
        
        // 将ID数组转换为JSON字符串格式
        const idsJsonString = JSON.stringify(serviceIds);
        console.log('转换为JSON字符串:', idsJsonString);

        const res = await api.consumablesSettings.deleteServe({
            ids: idsJsonString
        });

        if (res.code == 200) {
            ElMessage.success(`成功删除 ${serviceIds.length} 个服务项目`);
            // 清空选择
            clearSelection();
            // 刷新列表
            getConsumablesSettingsData();
        } else {
            ElMessage.error(res.message || '删除失败');
        }
    } catch (error) {
        console.log('用户取消删除');
    }
};

// 批量删除
const batchDelete = () => {
    if (selectedRows.value.length === 0) {
        ElMessage.warning('请先选择要删除的服务项目');
        return;
    }
    
    const serviceIds = selectedRows.value.map(row => row.id);
    DeleteServe(serviceIds);
};

// 侦听动态分页
watch(
    () => {
        return PageData.value;
    },
    () => {
        getConsumablesSettingsData();
    },
    { deep: true }
);

let nub = ref<number>(0);
const handleClickHeight = () => {
    nub.value++;
    if (nub.value % 2 == 1) {
        IsHeight.value = '50px';
    } else {
        IsHeight.value = '0px';
    }
}

const pageSize = (e: number) => {
    PageData.value.page_size = e
}       
const getPage = (e: number) => {
    PageData.value.page = e
}
onMounted(() => {
    getConsumablesSettingsData();
})


const loading = ref(false);
//  打开损耗设置弹窗
const handleClick = (row?: any) => {
    console.log('打开损耗设置弹窗，行数据:', row);
    LossSettingRef.value.openDialog(row);
}

// 新增服务
const AddServeRef = ref<any>(null);
const AddServer = () => {
    AddServeRef.value.openLoading();
}
// 编辑服务
const EditServe = (row?: any) => {
    console.log('编辑服务，行数据:', row);
    AddServeRef.value.openLoading(row);
}
</script>

<style lang="scss" scoped>
.btn-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

// 批量操作栏样式
.batch-operations {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-top: none;
    
    .batch-info {
        color: #626aef;
        font-weight: 500;
    }
    
    .batch-actions {
        display: flex;
        gap: 8px;
    }
}

// 输入框样式
::v-deep .el-input__wrapper {
    background-color: rgba(250, 252, 251, 1);
}

//表格样式

::v-deep .el-table {
    --el-table-header-bg-color: rgba(235, 236, 240, 1);
}

::v-deep .el-table thead {
    color: #444;
}

//分页样式
.pagination {
    width: calc(100% - 250px);
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding-top: 10px;
    border-top: 1px solid #98989848;


}

::v-deep .el-pagination.is-background .el-pager li.is-active {
    background-color: #000 !important;
}

.table-footer {
    display: flex;
    justify-content: space-between;
    padding: 16px 0;
    color: #333;
    background-color: #f5f7fa;
    margin-top: 20px;
}
</style>
